window.speed = 1.005;
window.pause = false;
const backgroundImage = new Image() // 创建Image对象
backgroundImage.src = 'http://sprs.dingplayer.com/assets/bg.png'
var Stars = function(args) {
    if (args === undefined) args = {};
    var _scope = this;
    this.stars = [];
    this.avatar = null; // 添加头像属性
    this.vel = args.vel || 1;
    this.radius = args.radius || 1;
    this.alpha = 0.5;
    this.starsCounter = args.stars || 300;
    var center = {
        x: window.innerWidth / 2,
        y: window.innerHeight / 2
    };
    var canvas, context;
    this.init = function() {
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");
        context.lineCap = "round";
        this.start();
        this.resize();
        window.addEventListener("resize", this.resize.bind(this));
    }

    this.start = function() {
        this.stars = [];
        for (var i = 0; i < this.starsCounter; i++) {
            setTimeout(function(){
                _scope.stars.push(new Star());
            }, i*30);
        }
        this.addAvatar(); // 添加头像
    }

    this.addAvatar = function() {
        for (let i = 0; i < window.userlist.length-1; i++) {
            setTimeout(()=>{
                var avatar = new Avatar(window.userlist[i]['avatarUrl']);
                _scope.stars.push(avatar);
            }, i*30);
        }
    }

    this.resize = function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        center.x = canvas.width / 2;
        center.y = canvas.height / 2;
    }

    this.animate = function() {
        window.requestAnimationFrame(this.animate.bind(this));
        if(!window.pause){
            this.render();
        }
       
    }
    this.render = function() {
        context.fillStyle = 'rgba(1, 4, 35, 0.8)';
        context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height)  //绘制背景图片
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.strokeStyle = "white";
        for (var i = 0; i < this.stars.length; i++) this.stars[i].update();
    }

    var Star = function() {
        this.x = center.x;
        this.y = center.y;
        this.init = function() {
            this.radius = Math.random() * _scope.radius;
            this.x = center.x;
            this.y = center.y;
            this.lineWidth = 0;
            this.vel = {
                x: Math.random() * 4 - 2,
                y: Math.random() * 4 - 2
            }
        }
        this.update = function() {
            this.vel.x *= window.speed;
            this.vel.y *= window.speed;
            this.lineWidth += 0.035;
            this.x0 = this.x;
            this.y0 = this.y;
            this.x += this.vel.x;
            this.y += this.vel.y;
            this.draw();
            if (this.isDead()) this.init();
            
            
        }
        this.draw = function() {
            context.beginPath();
            context.moveTo(this.x0, this.y0);
            context.lineTo(this.x, this.y);
            context.lineWidth = this.lineWidth;
            context.stroke();
        }
        this.isDead = function() {
            return (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height);
        }
        this.init();
        return this;
    }

    var Avatar = function(url) {
        Star.call(this); // 继承 Star
        // 随机-100~100、
        
        this.init = function() {
            this.scale = 0.4; // 初始缩放比例
            this.radius = Math.random() * _scope.radius;
            this.x = center.x;
            this.y = center.y;
            this.lineWidth = 0;
            this.vel = {
                x: Math.random() * 2 - 1,
                y: Math.random() * 2 - 1
            }
        }
        this.x = 0;
        this.y = 100;
        this.image = new Image();
        this.image.src = url; // 替换为你的头像图片路径
        this.image.onload = function() {
            this.init();
        }.bind(this);
        this.update = function() {
            this.lineWidth += 0.035;
            this.vel.x *= window.speed;
            this.vel.y *= window.speed;
            this.x0 = this.x;
            this.y0 = this.y;
            this.x += this.vel.x;
            this.y += this.vel.y;
            this.scale += 0.001; // 逐渐增加缩放比例
          
            this.draw();
            if (this.isDead()) this.init();
           
            if (this.scale > 1) this.scale = 1; // 限制最大缩放比例
           
           
        }
        this.draw = function() {
            context.save();
            context.beginPath(); // 开始新的路径
            // 以下参数分别为圆心x坐标，圆心y坐标，半径，起始角度，结束角度，顺时针或逆时针（false为逆时针）
            context.arc(this.x, this.y, 40*this.scale, 0, Math.PI * 2, false); // 假设我们想要的圆的半径为40
            context.clip(); // 使用路径作为裁剪区域
            context.drawImage(this.image, this.x - 40*this.scale, this.y - 40*this.scale, 80*this.scale, 80*this.scale); // 根据需要调整大小和位置
            context.restore();
        }
        return this;
    }
    Avatar.prototype = Object.create(Star.prototype);
    Avatar.prototype.constructor = Avatar;
    window.Stars = Stars;
    window.Avatar = Avatar;
    window.addAvatar = this.addAvatar;
    this.init();
    this.animate();
    return this;
}

function restart () {
    if(window._stars){
        _stars.stars.map((e,i)=>{
            if(e instanceof Avatar){
                _stars.stars.splice(i,1);
            }
        })
    }
    window._stars = new Stars();
}

// $(()=> {
//     restart();
// });


